<template>

    <div class="create_wj index_banner" :style="{ backgroundImage: 'url(' + footerbg + ')' }">

        <div style="padding:100px 50px;text-align: center;">
            <div style="margin: 100px auto;margin-top: 40px;">
                <h1 style="color: #fff;">含光AI搜索引擎</h1>
            </div>
            <el-input v-model="searchForm.keywords" style="max-width: 100%" placeholder="请在此输入您的问题"
                class="input-with-select" size="large" @keyup.enter.native="aiSearchDoc">
                <template #prepend>
                    <el-select v-model="searchForm.kdbListChecked" multiple collapse-tags collapse-tags-tooltip
                        placeholder="选择知识库" style="width: 255px" size="large">
                        <el-option :label="k.name" :value="k.id" v-for="k in kdbList" />
                    </el-select>
                </template>
                <template #append>
                    <el-button @click="aiSearchDoc()">
                        <el-icon>
                            <Search />
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </div>
    </div>
    <!-- {{searchDocRS}} -->
    <div style="padding: 20px;">
        <div v-for="kdbRS in searchDocRS?.kdbRSList">
            <div v-if="kdbRS.kdbRS.length > 0">
                <h1 class="title">来源知识库 - {{ kdbRS.kdbTitle }}</h1>
                <div v-if="kdbRS.kdbRS.length > 0">
                    <el-row :gutter="12">
                        <el-col :span="4" v-for="k in kdbRS.kdbRS">
                            <div style="margin: 4px;">
                                <div shadow="hover"
                                    style="background-color: #fff; height: 120px;overflow-y: auto;padding:10px;border-radius: 8px 8px 0px 0px;">
                                    <div>{{ k.content }}</div>
                                </div>
                                <div
                                    style="background-color: #afbfcf44;padding: 2px 10px;border-radius: 0px 0px 8px 8px ;">
                                    <div>
                                        <p
                                            style="white-space: nowrap;width: inherit;Box-sizing:border-box; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                            <el-link
                                                :href="`http://localhost:8000/transfer/downloadFile/${k.kdb_id}/${k.file_name}`">
                                                来源：{{
                                                    k.file_name }}</el-link>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div v-if="searchDocRS?.internetRS?.length > 0">
            <h1 class="title">来源互联网</h1>
            <el-row :gutter="12">
                <el-col :span="4" v-for="k in searchDocRS?.internetRS">
                    <div style="margin: 4px;">
                        <div shadow="hover"
                            style="background-color: #fff; height: 120px;overflow-y: auto;padding:10px;border-radius: 8px 8px 0px 0px;">
                            <div>{{ k.body }}</div>
                        </div>
                        <div style="background-color: #afbfcf44;padding: 2px 10px;border-radius: 0px 0px 8px 8px ;">
                            <div>
                                <p
                                    style="white-space: nowrap;width: inherit;Box-sizing:border-box; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                    <el-link :href="`${k.href}`">
                                        来源：{{
                                            k.href }}</el-link>
                                </p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <div style="padding: 20px;background-color: #fff;line-height: 32px;letter-spacing: 1px;">
        <h1 class="title">AI回答</h1>
        <div>
            <div v-html="answer"></div>
        </div>
    </div>
    <!-- {{searchDocRS}} -->
</template>
<script>
import { POST, streamPOST } from '../../util/axios.js'
import footerbg from '../../assets/footerbg.png'
import MarkdownIt from 'markdown-it'


export default {
    data() {
        return {
            footerbg: footerbg,
            searchForm: {
                kdbListChecked: [],
                keywords: ""
            },
            kdbList: [],
            searchDocRS: {},
            answer: ""
        }
    },
    methods: {

        async getKDBList() {
            let rs = await POST("/kdb/getKDBList", "POST", {}, false)
            console.log("rs:>>:", rs)
            this.kdbList = rs.data
        },
        async aiSearchDoc() {
            this.answer = ""
            this.searchDocRS = {}
            let rs = await POST("/aiSearch/searchDoc", "POST", this.searchForm, false)
            console.log("rs:>>:", rs)
            this.searchDocRS = rs.data
            this.aiAnswer()
        },
        async aiAnswer() {
            let md = new MarkdownIt();
            let rs = await streamPOST("/aiSearch/answer", this.searchForm)
            console.log("rs:ANSWER>>:", rs)
            if (!rs.body) return;
            const reader = rs.body.pipeThrough(new TextDecoderStream()).getReader();
            let answerTemp=""
            while (true) {
                var { value, done } = await reader.read();
                if (done) break;
                value = value?.replace('undefined', '')
                // console.log("received data -", value)
                answerTemp += value?.replace('undefined', '')
                this.answer = md.render(answerTemp); //传入文本
            }
            // this.answer = rs.data
            this.answer = md.render(answerTemp); //传入文本
        },
    },
    mounted() {
        this.getKDBList()
    }
}
</script>
<style></style>